import { View, Text } from '@tarojs/components'
import React from 'react'
import './index.scss'

const Notifications = () => {
  const notifications = [
    {
      id: '1',
      type: 'system',
      title: '系统通知',
      content: '欢迎使用今天吃什么APP，希望能帮您解决选择困难症！',
      time: '2024-03-15 10:00',
      isRead: false
    },
    {
      id: '2',
      type: 'promotion',
      title: '优惠活动',
      content: '新用户专享优惠券已发放，快去领取使用吧！',
      time: '2024-03-14 15:30',
      isRead: true
    },
    {
      id: '3',
      type: 'order',
      title: '订单提醒',
      content: '您的订单已完成配送，请及时评价！',
      time: '2024-03-14 12:45',
      isRead: true
    }
  ]

  const getIconByType = (type) => {
    switch (type) {
      case 'system':
        return 'fa-bell'
      case 'promotion':
        return 'fa-gift'
      case 'order':
        return 'fa-clipboard-list'
      default:
        return 'fa-circle-info'
    }
  }

  return (
    <View className='notifications'>
      <View className='notifications__header'>
        <Text className='notifications__title'>消息通知</Text>
        <Text className='notifications__count'>{notifications.length}条消息</Text>
      </View>

      {notifications.length > 0 ? (
        <View className='notifications__list'>
          {notifications.map(notification => (
            <View
              key={notification.id}
              className={`notifications__item ${notification.isRead ? 'is-read' : ''}`}
            >
              <View className={`notifications__item-icon notifications__item-icon--${notification.type}`}>
                <Text className={`fa-solid ${getIconByType(notification.type)}`} />
              </View>
              <View className='notifications__item-content'>
                <View className='notifications__item-header'>
                  <Text className='notifications__item-title'>{notification.title}</Text>
                  <Text className='notifications__item-time'>{notification.time}</Text>
                </View>
                <Text className='notifications__item-text'>{notification.content}</Text>
              </View>
              {!notification.isRead && (
                <View className='notifications__item-badge' />
              )}
            </View>
          ))}
        </View>
      ) : (
        <View className='notifications__empty'>
          <Text className='fa-solid fa-bell-slash notifications__empty-icon' />
          <Text className='notifications__empty-text'>暂无消息通知</Text>
          <Text className='notifications__empty-tip'>有新消息时会在这里提醒您</Text>
        </View>
      )}
    </View>
  )
}

export default Notifications 